<template>
	<el-popover
		popper-class="filter-table-popper"
		placement="bottom-end"
		width="200"
		trigger="click"
		v-model="show"
		@show="filterShow"
	>
		<div class="filter-table">
			<div class="filter-table_title">
				<div class="color-placeholder">显示</div>
				<el-button type="text" @click="reset">恢复默认</el-button>
			</div>
			<div class="filter-table_content">
				<el-checkbox-group v-model="checkedArr" @change="checkedChange" size="medium">
					<div class="list" v-for="(item, index) in columns" :key="index">
						<el-checkbox :label="item[filterKey]" :disabled="item.disable">
							{{ item[filterKey] }}
						</el-checkbox>
					</div>
				</el-checkbox-group>
			</div>
			<div class="filter-table_bottom">
				<el-checkbox
					:indeterminate="indeterminate"
					v-model="checkAll"
					@change="allChange"
					size="medium"
				>
					全选
				</el-checkbox>
				<el-button type="primary" size="mini" @click="confirm">确认</el-button>
			</div>
		</div>
		<el-button slot="reference">
			<slot />
		</el-button>
	</el-popover>
</template>

<script>
export default {
	name: "cl-table-filter",
	props: {
		columns: {
			type: Array,
			default: () => []
		},
		value: {
			type: Array,
			default: () => []
		},
		// 匹配的键值
		filterKey: {
			type: String,
			default: "label"
		}
	},
	data() {
		return {
			show: false,
			checkAll: false,
			isIndeterminate: true,
			// 已选择的数据
			checkedArr: [],
			defaultCheckedArr: []
		};
	},
	computed: {
		indeterminate() {
			const { checkAll, checkedArr, columns } = this;
			if (checkAll) return false;
			let checkedArrLen = checkedArr.length;
			let columnsLen = columns.length;
			return checkedArrLen > 0 && checkedArrLen < columnsLen;
		},
		isCheckAll() {
			const { checkedArr, columns } = this;
			let checkedArrLen = checkedArr.length;
			let columnsLen = columns.length;
			return checkedArrLen === columnsLen;
		}
	},
	created() {
		this.defaultCheckedArr = this.value;
	},
	methods: {
		// 全选
		allChange(val) {
			this.isIndeterminate = false;
			if (val) {
				this.checkedArr = this.columns.map(e => e[this.filterKey]);
				return;
			}
			this.checkedArr = this.getDisableChenkArr();
		},
		checkedChange(value) {
			let checkedCount = value.length;
			this.checkAll = checkedCount === this.columns.length;
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.columns.length;
		},
		// 获取初始化的选择数据
		getChenkArr() {
			const columns = this.columns.map(e => e[this.filterKey]);
			const data = this.value.map(e => e[this.filterKey]);
			return columns.filter(e => data.includes(e));
		},
		// 获取非不可选择的chenk数组
		getDisableChenkArr() {
			return this.columns.filter(e => e.disable).map(e => e[this.filterKey]);
		},
		// 显示初始化
		filterShow() {
			this.checkedArr = this.getChenkArr();
			this.checkAll = this.isCheckAll;
		},
		// 确认筛选
		confirm() {
			const newArr = this.columns.filter(e => this.checkedArr.includes(e[this.filterKey]));
			this.$emit("confirm", newArr);
			this.$emit("input", newArr);
			this.show = false;
		},
		// 重置
		reset() {
			this.checkedArr = this.columns.map(e => e[this.filterKey]);
			this.checkAll = true;
		}
	}
};
</script>

<style lang="scss">
.filter-table-popper {
	padding: 10px;
}
</style>

<style lang="scss" scoped>
.filter-table {
	&_title,
	&_bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	&_title {
		margin-top: -4px;
		margin-bottom: 4px;
	}
	&_content {
		max-height: 400px;
		overflow-y: auto;
		.list {
			width: 100%;
			padding: 5px 0;
			&:hover {
				background-color: #f7f7f7;
			}
			.el-checkbox {
				width: 100%;
			}
		}
	}
	&_bottom {
		margin-top: 6px;
		padding-top: 10px;
		border-top: 0.5px solid $border-main;
	}
}
</style>
